<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="./js/pubfile.js"></script>
		<script type="text/javascript" src="./js/svgCreate.js"></script>
		<script type="text/javascript" src="./js/redBlackTree.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/node.css">
		<script type="text/javascript">
			var tree = new Tree();
			function init(){
				tree = new Tree();
				initVal.initDepth();
				document.getElementById("show").innerHTML="";
				document.getElementById("stack").innerHTML = "";
			}
			function template(){
				tree.add(1,1);
				tree.add(2,2);
				tree.add(3,3);
				tree.add(4,4);
				var item = [];
				item.push(tree);
				var svg = new SVG(item);
				initVal.initDepth();
				tree.afterCompute = function(){
					svg.setSize(initVal.getMaxRow(),initVal.getMaxCol());
				}
				document.getElementById("show").innerHTML=svg.draw();
				
				document.getElementById("stack").innerHTML = "";
				var stack = initVal.img.stack;
				var len = stack.length;
				for(var i = 0; i< len ; i++){
					document.getElementById("stack").innerHTML += stack[i];
				}
			}
			function addOne(){
				var num = parseInt(Math.random()*10000);
				old = tree.clone();
				tree.add(num,num);
				var item = [];
				item.push(tree);
				var svg = new SVG(item);
				initVal.initDepth();
				tree.afterCompute = function(){
					svg.setSize(initVal.getMaxRow(),initVal.getMaxCol());
				}
				document.getElementById("show").innerHTML=svg.draw();
				
				document.getElementById("stack").innerHTML = "";
				var stack = initVal.img.stack;
				var len = stack.length;
				for(var i = 0; i< len ; i++){
					document.getElementById("stack").innerHTML += stack[i];
				}
			}
			function add(){
				var key = document.getElementById("iptKey").value;
				if(tool.isNull(key)||tool.isEmptyString(key)){
					alert("待操作的key为空");
					return;
				}
				if(isNaN(key)){
					alert("请您输入操作的key并确保key为整数！！！");
					return;
				}
				var num = parseInt(key);
				old = tree.clone();
				tree.add(num,num);
				var item = [];
				item.push(tree);
				var svg = new SVG(item);
				initVal.initDepth();
				tree.afterCompute = function(){
					svg.setSize(initVal.getMaxRow(),initVal.getMaxCol());
				}
				document.getElementById("show").innerHTML=svg.draw();
				document.getElementById("stack").innerHTML = "";
				var stack = initVal.img.stack;
				var len = stack.length;
				for(var i = 0; i< len ; i++){
					document.getElementById("stack").innerHTML += stack[i];
				}
			}
			function del(){
				var key = document.getElementById("iptKey").value;
				if(tool.isNull(key)||tool.isEmptyString(key)){
					alert("待操作的key为空");
					return;
				}
				if(isNaN(key)){
					alert("请您输入操作的key并确保key为整数！！！");
					return;
				}
				var num = parseInt(key);
				if(tool.isNull(tree)){
					alert("红黑树为空");
					return;
				}
				tree.remove(num);
				var item = [];
				item.push(tree);
				var svg = new SVG(item);
				initVal.initDepth();
				tree.afterCompute = function(){
					svg.setSize(initVal.getMaxRow(),initVal.getMaxCol());
				}
				document.getElementById("show").innerHTML=svg.draw();
				document.getElementById("stack").innerHTML = "";
				var stack = initVal.img.stack;
				var len = stack.length;
				for(var i = 0; i< len ; i++){
					document.getElementById("stack").innerHTML += stack[i];
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="模板增加" onclick="template()" />
		<input type="button" value="重置" onclick="init()" />
		<input type="button" value="随机增加" onclick="addOne()" />
		<input id="iptKey" type="text" placeholder="请输入需要操作的key">
		<input type="button" value="增加" onclick="add()" />
		<input type="button" value="删除" onclick="del()" />
		<div id="show">
			
		</div>
		<div id="stack">
			
		</div>
	</body>
</html>
